<template>
  <div class="mu">
    <ol class="mulu">
      <li @click="gotosign">
        <img src="../../assets/img/01.png" alt="" />
        <p>签到</p>
      </li>
      <li @click="gotogfit">
        <img src="../../assets/img/02.png" alt="" />
        <p>礼劵</p>
      </li>
      <li @click="gotobargain">
        <img src="../../assets/img/03.png" alt="" />
        <p>砍价</p>
      </li>
      <li @click="gotospecial">
        <img src="../../assets/img/04.png" alt="" />
        <p>专栏</p>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    //去签到
    gotosign() {
      // alert("功能暂未开放");
      this.$router.push({ path: "/Sign" });
    },
    //去礼券
    gotogfit() {
      alert("功能暂未开放");
    },
    //去砍价
    gotobargain() {
      // alert("功能暂未开放");
      this.$router.push({ path: "/Whole" });
    },
    //去专栏
    gotospecial() {
      // alert("功能暂未开放");
      this.$router.push({ path: "/Special" });
    },
  },
};
</script>

<style lang="scss" scoped>
.mu {
  position: relative;
}
.mulu {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: center;
  text-align: center;
  font-size: 0.3rem;
  border-bottom: 0.3rem solid #f5f5f5;
  position: absolute;
  top: -1.7rem;
  background: white;
  padding-top: 0.3rem;
  border-radius: 25% 25% 0 0;
  > li {
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
}
</style>
